$(function(){

	/*定位到展示用户列表的坐标*/
	var customers_info_table = $("#customers_info_table");
	/*专门负责前后端ajax数据请求与获取*/
	var customerAjaxOperator = new CustomerAjaxOperator();
	/*前端渲染器*/
	var customerInfoRenderer = new CustomerInfoRenderer();
	/*时间格式化工具*/
	var dateFormatUtil = new DateFormatUtil(); 

	//初始化页面
	init();

	//前台维护的customer对象，和后台一致
	function Customer(){
		let id;
		let name;
		let sex;
		let sal;
		let birth;
	}


	function CustomerAjaxOperator(){
		var obj = {};

		obj.loadAllCustomers = function loadAllCustomers(renderer){
			$.ajax({
				type:"POST",
				url:"./loadAllCustomers",
				dataType:"json"
			}).done(function(customers){
				renderer(customers);
			});
		}

		obj.addCustomer = function addCustomer(customerJson, renderer){
			$.ajax({
				type:"POST",
				url:"./addCustomer",
				data: customerJson,
				contentType: "application/json"
			}).done(function(customer){
				renderer(customer);
			});
		};

		obj.delCustomer = function delCustomer(customerId, renderer){
			$.ajax({
				type:"POST",
				url:"./delCustomer?customerId="+customerId
			}).done(function(){

			})
		};

		obj.updateCustomer = function updateCustomer(customerJson, renderer){
			$.ajax({
				type:"POST",
				url:"./updateCustomer",
				data: customerJson,
				contentType:"application/json"
			}).done(function(customers){
				renderer(customers);
			});
		};

		return obj;
	}


	/*渲染器*/
	function CustomerInfoRenderer(){
		let obj = {};
		
		/*单个customer渲染*/
		obj.renderCustomerInfo = function(customer){
			let customerInfo = "<tr>"+
									"<td id='current_customer_id'>"+customer.id +"</td>"+
									"<td>"+customer.name+"</td>"+
									"<td>"+customer.sex +"</td>"+
									"<td>"+customer.sal +"</td>"+
									"<td>"+customer.birth+"</td>"+
									"<td>"+"<button id='delete_one_customer'> 删除 </button>" +"</td>"+
									"<td>"+"<button id='update_one_customer' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal'> 更新 </button>" +"</td>"+
								"</tr>";
			customers_info_table.append($.parseHTML(customerInfo));
		};

		/*多个customer 渲染*/
		obj.renderCustomersInfo = function(customers){
			customers_info_table.html("");
			$.each(customers, function(index, customer){
				obj.renderCustomerInfo(customer);
			});
		}

		/*删除一个 customer*/
		obj.delCustomerInfo = function(item){
			item.remove();
		}
		return obj;
	}

	//时间格式化工具
	function DateFormatUtil(){
		var obj = {};

		obj.formatDate = function(time){
			let newDate = new Date();
			newDate.setTime(time);
			let fmtDate = newDate.getFullYear() +"年" + eval(newDate.getMonth()+1) +"月" +
						  newDate.getDate() +"日";
			return fmtDate;
		}
		return obj;
	}


	/*各种监听器*/
	$("#add_one_customer").on("click", function(){
		let customer = new Customer();
		customer.name = $("#name").val();
		customer.sex = $("input:radio:checked").val();
		customer.sal = $("#sal").val();
		customer.birth = $("#birth").val();
		customerAjaxOperator.addCustomer(JSON.stringify(customer), customerInfoRenderer.renderCustomerInfo);
	});

	//删除 table 的一条记录
	$("#customers_info_table").on("click", function(event){
		if($(event.target).attr("id") == "delete_one_customer"){
			let delBtn = $(event.target);
			let customerItem = delBtn.parent().parent();
			let customerId = customerItem.children(":first-child").text();
			customerItem.remove();
			customerAjaxOperator.delCustomer(customerId);
		}
	});

	//更新 customer 信息
	$("#customers_info_table").on("click", function(event){
		if($(event.target).attr("id") == "update_one_customer"){
			let initCustomer = new Customer();
			/*获取到原来的值*/
			let customerItem = $(event.target).parent().parent();
			initCustomer.id = customerItem.children().eq(0).text();
			initCustomer.name = customerItem.children().eq(1).text();
			initCustomer.sex = customerItem.children().eq(2).text();
			initCustomer.sal = customerItem.children().eq(3).text();
			initCustomer.birth = customerItem.children().eq(4).text();

			/*传到修改页面*/
			$("#update_customer_id").val(initCustomer.id);
			$("#update_customer_name").val(initCustomer.name);
			$(":radio[name='update_sex'][value='" + initCustomer.sex + "']").prop("checked", "checked");
			$("#update_customer_sal").val(initCustomer.sal);
			$("#update_customer_birth").val(initCustomer.birth);	

			/*接下来由模态框来完成信息的修改与保存*/	
		}
	});

	/*模态框 确认 保存*/
	$("#confirm_update_customer").on("click", function(event){
		let saveBtn = $(event.target);
		let customer = new Customer();
		customer.id = $("#update_customer_id").val();
		customer.name = $("#update_customer_name").val();
		customer.sex = $(":radio[name='update_sex']").val();
		customer.sal = $("#update_customer_sal").val();
		customer.birth = $("#update_customer_birth").val();
		
		customerAjaxOperator.updateCustomer(JSON.stringify(customer), customerInfoRenderer.renderCustomersInfo);
		$("#myModal").modal("hide");
	});

	/*模态框点击 save change 后保存*/
	/*$("#confirm_update_customer").on("click", function(){
		$("#myModal").modal("hide");
	});*/

	function init(){
		customers_info_table.html("");
		customerAjaxOperator.loadAllCustomers(customerInfoRenderer.renderCustomersInfo);
	}
});
